<template>
  <el-row class="map">
    <el-col :span="12">
      <highmaps :options="option" style="max-width: 510px" ref="highchart"></highmaps>
    </el-col>
    <el-col :span="12">
      <div class="top-title">排名</div>
      <el-row class="source-bar" v-for="(i, index) in top10">
        <el-col :span="2"  v-bind:class="[index < 3 ? colorClass : '']">{{index+1}}</el-col>
        <el-col :span="4">{{i.name}}&nbsp;</el-col>
        <el-col :span="12" class="top-all">
          <div  v-bind:style="{ backgroundColor: i.color, width: i.width }" class="top-short">
          </div>
        </el-col>
        <el-col :span="4">{{i.data}}</el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
  import Highcharts from 'highcharts'
  import cnAllChina from '@/utils/cn-china-by-peng8.js'
  let monitorMapData = Highcharts.geojson(cnAllChina)
  export default {
    name: 'monitorArea',
    data () {
      let that = this
      return {
        option: {
          chart: {
            plotBackgroundColor: '#fff',
            events: {
            }
          },
          tooltip: {
            useHTML: true,
            formatter: function () {
              return '<div style="width:;">' +
                that.$t('public.callIn') +
                '<br /><span style="display:inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:' + this.color + ';"></span>' + this.point.name + ':' + this.point.value + '</div>'
            }
          },
          credits: {
            href: 'javascript:goHome()',
            text: ''
          },
          title: {
            text: ''
          },
          subtitle: {
            text: '',
            floating: true,
            align: 'left',
            y: 446,
            style: {
              fontSize: '12px'
            }
          },
          crop: true,
          legend: {
            x: 30,
            layout: 'align',
            align: 'left',
            verticalAlign: 'bottom'
          },
          colorAxis: {
            min: 0,
            allowDecimals: false,
            minColor: '#B5DAFD',
            maxColor: '#07134F',
            stops: [
              [0, '#B5DAFD'],
              [0.67, '#0E51F0'],
              [1, '#07134F']
            ]
          },
          mapNavigation: {
            enabled: true,
            enableMouseWheelZoom: false,
            enableDoubleClickZoom: false,
            buttonOptions: {
              verticalAlign: 'bottom'
            }
          },
          plotOptions: {
            map: {
              borderColor: '#fff',
              nullColor: '#E1EEFA'
            }
          },
          series: [{
            data: [],
            name: '1',
            color: '',
            dataLabels: {
              enabled: false
//              format: '{point.properties.cn-name}'
            },
            states: {
              hover: {
                brightness: 0.07,
                borderColor: '#fff'
              }
            }
          }]
        },
        top10: [],
        colorClass: 'colorClass',
        top10Colors: ['#985fac', '#ee596f', '#f48c4d', '#7acdd1', '#7acdd1', '#7acdd1', '#7acdd1', '#7acdd1', '#7acdd1', '#7acdd1']
      }
    },
    components: {
    },
    computed: {
    },
    watch: {
      '$store.state.navMenuState' () {
        if (this.$refs.highchart) {
          this.$refs.highchart.chart.reflow()
        }
      }
    },
    methods: {
      update (target, data) {
        for (const key in data) {
          this.$set(target, key, data[key])
        }
      },
      renderMap (datakey) {
        // let datakey = this.searchIndex
        let mapdata = monitorMapData
        mapdata.forEach(function (item) {
          item.name = item.properties['cn-name']
          item.value = null
          for (let j = 0; j < datakey.length; j++) {
            if (datakey[j].PROVINCE && datakey[j].PROVINCE.indexOf(item.name) !== -1) {
              item.value = datakey[j].count
              break
            }
          }
        })
        let top10 = this.top(datakey)
        top10.forEach((item, index) => {
          if (this.top10[index]) {
            this.update(this.top10[index], item)
          } else {
            this.$set(this.top10, index, item)
          }
        })
        this.option.series[0].data = mapdata
      },
      top (dataAll) {
        let data = dataAll.splice(0, 10)
        return data.map((item, index) => ({
          width: data[0].count > 0 ? Math.round(80 * item.count / data[0].count) + '%' : 0,
          color: this.top10Colors[index],
          name: item.PROVINCE,
          data: item.count
        }))
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  .top-title
    padding-top 50px
    margin-bottom 16px
  .source-bar
    padding 4px 0
  .top-all
    height 20px
  .top-short
    height 7px
    margin-top 5px
  .colorClass
    color #985fac
</style>
